<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>角色权限维护</title>


		<link rel="stylesheet" href="../css/index.css">
		<script src="../js/vue.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/mycommon.js"></script>

	</head>

	<body>


		<div id="app">

			<fieldset style="border: 1px solid gainsboro;margin-bottom: 4px;">
				<legend><i class="el-icon-search" style="color:#bfb6a3 ;">查询</i></legend>
				<el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="角色名字">
						<el-input v-model="formInline.user" placeholder="标题"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="onSubmit">查询</el-button>
						<el-button type="warning" @click="open">增加角色</el-button>
					</el-form-item>
				</el-form>
			</fieldset>

			<el-row>
				<!-- <el-col :span="16"> -->
				<el-table size="big" :data="tableData" border style="width: 100%" :cell-style="{'text-align':'center'}"
					:header-cell-style="{'text-align':'center'}">
					<el-table-column prop="rolename" label="角色名字" width="150">
					</el-table-column>
					<el-table-column prop="remark" label="备注" width="150">
					</el-table-column>
					<el-table-column label="操作" width="230">
						<template slot-scope="scope">
							<el-button type="primary" size="mini"
								@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="mini" type="danger"
								@click="handleDelete(scope.$index, scope.row)">删除</el-button>
							<el-button size="mini" type="danger"
								@click="handleOpenRole(scope.$index, scope.row)">权限</el-button>
						</template>
					</el-table-column>
				</el-table>

				<!-- </el-col> -->
				<!-- <el-col :span="8"> -->

				<!-- </el-col> -->
			</el-row>
			<el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="tocal"
				:page-size="pagesize">
			</el-pagination>

			<el-dialog title="增加角色" :visible.sync="dialogVisible" width="50%">

				<el-form ref="form" :model="sizeForm" label-width="100px" size="mini">
					<el-form-item label="角色名字">
						<el-input v-model="sizeForm.name"></el-input>
					</el-form-item>

					<el-form-item label="备注">
						<el-input v-model="sizeForm.name"></el-input>
					</el-form-item>
				</el-form>



				<span slot="footer" class="dialog-footer">
					<el-button size="mini" @click="dialogVisible = false">取 消</el-button>
					<el-button size="mini" type="primary" @click="onSubmit">确 定</el-button>
				</span>
			</el-dialog>

			<!-- 角色对应拥有者的权限 -->
			<el-dialog title="角色权限" :visible.sync="dialogFormVisibleRole">
				<template>
					<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
						<el-tab-pane label="角色所属用户管理" name="first">
							<el-button type="primary" size="mini" @click="handleEdit">添加角色用户</el-button>
							<el-tag @close="handleClickUser(tag)" v-for="tag in listUser" :key="tag.id" closable
								type="red">
								{{tag.sysusername}}
							</el-tag></el-tab-pane>
						<el-tab-pane label="角色所属部门管理" name="second">
							<el-button type="primary" size="mini" @click="handleEdit">添加角色部门</el-button>
							<el-tag @close="handleClickDep(tag)" v-for="tag in listDep" :key="tag.id" closable
								type="danger">
								{{tag.department}}
							</el-tag></el-tab-pane>
						<el-tab-pane label="角色所属岗位管理" name="third">
							<el-button type="primary" size="mini" @click="handleEdit">添加角色岗位</el-button>

							<el-tag @close="handleClickPos(tag)" v-for="tag in listPos" :key="tag.id" closable
								type="success">
								{{tag.post}}
							</el-tag></el-tab-pane>
						<el-tab-pane label="角色所属工种管理" name="third1	">
							<el-button type="primary" size="mini" @click="handleEdit">添加角色工种</el-button>

							<el-tag @close="handleClickJob(tag)" v-for="tag in listJob" :key="tag.id" closable
								type="success">
								{{tag.jobtype}}
							</el-tag></el-tab-pane>
					</el-tabs>
				</template>
			</el-dialog>

		</div>

		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					tableData: [],
					activeName: 'first',
					formInline: {
						user: ''
					},
					dialogVisible: false,
					dialogFormVisibleRole: false,
					sizeForm: {
						name: '',
						region: ''
					},
					tocal: 0, //分页总条数
					page: 1, //当前第几页
					pagesize: 2, //每页条数
					//角色所属
					listJob: [],
					listDep: [],
					listPos: [],
					listUser: []

				},
				methods: {
					handleClick(tab, event) {
						console.log(tab, event);
					},
					handleCurrentChange(val) { //分页
						this.page = val //设置当前页
						this.initdata() //发送ajax请求重新获取数据
					},
					handleEdit(index, row) {
						console.log(index, row);
					},
					handleDelete(index, row) {
						console.log(index, row);
					},
					onSubmit() {
						console.log('submit!');
						//执行业务提交
						this.dialogVisible = false
					},
					open() {
						this.dialogVisible = true
					},
					handleOpenRole(index, row) { //角色权限维护
						//角色对应的人员部门岗位
						this.dialogFormVisibleRole = true
						var that = this
						//ajax请求后端接口获取json数据
						axios.post(HTTP + "sysuserMidrole/selectRoleid", {
							"roleid": row.id
						}).then(function(res) {
							//alert(JSON.stringify(res));
							that.listDep = res.data.data.listDep
							that.listJob = res.data.data.listJob
							that.listPos = res.data.data.listPos
							that.listUser = res.data.data.listUser

						}).catch(err => {
							console.log(err)
						});
					},
					//删除角色用户
					handleClickUser(tag) {

						var that = this
						//ajax请求后端接口获取json数据
						axios.post(HTTP + "sysuserMidrole/delUserByid", {
							"id": tag.id
						}).then(function(res) {
							//alert(JSON.stringify(res));
							that.listUser.splice(that.listUser.indexOf(tag), 1)

							if (res.data.code == 200) {
								//删除成功
								that.$message('删除成功')

								that.page = 1
								that.initdata()
							}


						}).catch(err => {
							console.log(err)
						});
					},
					//删除角色部门
					handleClickDep(tag) {

						var that = this
						//ajax请求后端接口获取json数据
						axios.post(HTTP + "sysuserMidrole/delUserByid", {
							"id": tag.id
						}).then(function(res) {
							//alert(JSON.stringify(res));
							that.listDep.splice(that.listDep.indexOf(tag), 1)

							if (res.data.code == 200) {
								//删除成功
								that.$message('删除成功')

								that.page = 1
								that.initdata()
							}


						}).catch(err => {
							console.log(err)
						});
					},
					//删除角色岗位
					handleClickPos(tag) {

						var that = this
						//ajax请求后端接口获取json数据
						axios.post(HTTP + "sysuserMidrole/delUserByid", {
							"id": tag.id
						}).then(function(res) {
							//alert(JSON.stringify(res));
							that.listPos.splice(that.listPos.indexOf(tag), 1)

							if (res.data.code == 200) {
								//删除成功
								that.$message('删除成功')

								that.page = 1
								that.initdata()
							}


						}).catch(err => {
							console.log(err)
						});
					},
					//删除角色工种
					handleClickJob(tag) {

						var that = this
						//ajax请求后端接口获取json数据
						axios.post(HTTP + "sysuserMidrole/delUserByid", {
							"id": tag.id
						}).then(function(res) {
							//alert(JSON.stringify(res));
							that.listJob.splice(that.listUser.indexOf(tag), 1)

							if (res.data.code == 200) {
								//删除成功
								that.$message('删除成功')

								that.page = 1
								that.initdata()
							}


						}).catch(err => {
							console.log(err)
						});
					},
					//查询
					initdata() {
						var that = this
						//ajax请求后端接口获取json数据
						axios.get(HTTP + "sysuserMidrole/select/" + this.page).then(function(res) {
							//alert(JSON.stringify(res));
							that.tableData = res.data.data.pageInfo.list
							that.tocal = res.data.data.pageInfo.total

						}).catch(err => {
							console.log(err)
						});
					}

				},
				mounted() { //vue生命周期的方法
					//发送ajax请求到后端接口，获取json数据
					this.initdata()
				}
			})
		</script>

	</body>

</html>